<div id="app">
    <admin-page-header>
        <bi-button icon="fa-plus" type="primary" @click="handleEdit()">添加型号</bi-button>
    </admin-page-header>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <bi-card title="型号列表">
                    <bi-table :data="list" :loading="loading" height="300" >
                        <bi-table-column label="ID" name="variant_id" width="100"></bi-table-column>
                        <bi-table-column label="分类名称" name="title" v-slot="{row}">
                           
                        </bi-table-column>
                        <bi-table-column label="冷数据" v-slot="{row}" width="100"  >
                            <cold-switch :cold="row.cold" :id="row.variant_id" :url="{controller:'admin.variant',action:'cold'}" :storage="'shop-variant'" ></cold-switch>
                        </bi-table-column>
                        <bi-table-column label="操作" width="220" v-slot="{row}">
                            <bi-button type="primary" @click="handleParam(row)"  >管理参数</bi-button>
                            <bi-button type="primary" @click="handleEdit(row)"  >编辑</bi-button>
                            <bi-button type="warning" @click="handleDel(row)" >删除</bi-button>
                        </bi-table-column>
                    </bi-table>
                </bi-card>
            </div>
        </div>
    </div>
</div>


<script>
import editDialog from 'variant/edit-dialog.vue';
import itemListDialog from 'variant/item-list-dialog.vue';
import coldSwitch from 'field/cold-switch.vue';
    let app = admin.createApp({
        components:{
            coldSwitch
        },
        data(){
            return {
                list:[],
                loading:false
            }
        },
        methods:{
            refresh(){
                this.loading = true;
                this.$ajax({
                    url:this.$url({action:'list'}),
                    success:(res)=>{
                        this.loading = false;
                        this.list = res;
                    }
                });
            },
            handleParam(item){
                this.$dialog({
                    title:'型号参数',
                    type:'vue',
                    content:admin.createApp(itemListDialog,{variant_id:item.variant_id}),
                    callback:()=>{
                    }
                });
            },
            handleEdit(item){
                let title = item?'编辑型号':'添加型号';
                this.$dialog({
                    title:title,
                    type:'vue',
                    content:admin.createApp(editDialog,{item}),
                    callback:(id)=>{
                        this.$user.delLocalStorage('shop-variant');
                        this.refresh();
                    }
                });
            },
            handleDel(item){
                this.$confirm({text:'确定删除？',type:'warning'},()=>{
                    this.$ajax({
                        url:this.$url({action:'del'}),
                        data:{
                            variant_id:item.variant_id
                        },
                        success:(res)=>{
                            this.getList();
                            this.$user.delLocalStorage('shop-variant');
                            this.$toast({text:'删除成功',type:'success'});
                        }
                    })
                })
            }
        },
        mounted(){
            this.refresh();
        }
    }).mount('#app');    
</script>